<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">
                首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/page' }">
                权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/group' }"
                >权限组管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>
                {{ info.name }}【权限组授权】
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-page-header @back="goBack" :content="info.name">
            </el-page-header>
            <el-alert :title="info.describe" type="warning" />
            <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入接口路由内容"
                :titles="['可授权', '已授权']"
                :button-texts="['取消权限', '增加权限']"
                v-model="requiredList"
                :data="apisList"
            >
            </el-transfer>
            <el-button type="primary" @click="subAuth">保存</el-button>
        </el-card>
    </div>
</template>

<script>
import requestApis from '@/request'
export default {
    data () {
        return {
            info: [],
            apisList: [],
            requiredList: []
        }
    },
    created () {
        this.getRow(this.$route.query.id)
        this.getApisList()
        this.getGroupPower(this.$route.query.id)
    },
    methods: {
        goBack () {
            this.$router.back()
        },
        getRow (id) {
            requestApis.getGroupRow({ id }).then(res => {
                if (res.meta.code === 1) {
                    this.info = res.data
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                    this.$router.back()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        subAuth () {
            requestApis.saveGroupPower({ id: this.$route.query.id, apis_list: this.requiredList.join(','), is_required: 1 }).then(res => {
                if (res.meta.code === 1) {
                    this.$message({
                        message: '授权权限成功',
                        type: 'success'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getApisList () {
            requestApis.getApisList().then(res => {
                if (res.meta.code === 1) {
                    res.data.forEach(item => {
                        this.apisList.push({
                            label: item.apis_name,
                            key: item.id
                        })
                    })
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getGroupPower (id) {
            var that = this
            requestApis.getGroupPower({ id }).then(res => {
                if (res.meta.code === 1) {
                    if (res.data !== null) {
                        res.data.forEach(item => {
                            that.requiredList.push(item)
                        })
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        filterMethod (query, item) {
            if (item.label) {
                return item.label.indexOf(query) > -1
            } else {
                return false
            }
        }
    }
}
</script>

<style>
.el-transfer-panel {
    width: 300px !important;
}
.el-alert {
    margin: 30px auto;
}
</style>
